<template>
  <div class="byxyxfjhhzmqjc">
    <p class="top">
      <span style="font-weight: 700; font-size: 16px; color: #000">患者1</span>
      <span style="display: inline-block; margin: 0 20px"
        >证件号：533221194503112723</span
      >
      <span>填表人：肖汉琪</span>
    </p>
    <p style="font-weight: 900; font-size: 20px; color: #000">病原学阳性患者</p>
    <div class="box">
      <span>病原学阳性患者姓名：</span>
      <el-input
        placeholder="请输入"
        v-model="info.病原学阳性患者姓名"
        style="width: 200px"
        size="small"
      >
        <!-- <template slot="append">月</template> -->
      </el-input>
    </div>
    <div class="box">
      <span>登记号：</span>
      <el-input
        placeholder="请输入"
        v-model="info.登记号"
        style="width: 200px"
        size="small"
      >
        <!-- <template slot="append">月</template> -->
      </el-input>
    </div>
    <div class="box">
      <span>联系电话：</span>
      <el-input
        placeholder="请输入"
        v-model="info.联系电话"
        style="width: 200px"
        size="small"
      >
        <!-- <template slot="append">月</template> -->
      </el-input>
    </div>
    <p style="font-weight: 900; font-size: 20px; color: #000">接触者</p>
    <div class="box" v-for="item in list" :key="item">
      <p>
        接触者姓名：
        <el-input
          placeholder="请输入"
          v-model="info.接触者姓名"
          style="width: 200px"
          size="small"
        >
          <!-- <template slot="append">月</template> -->
        </el-input>
        性别：
        <el-input
          placeholder="请输入"
          v-model="info.性别"
          style="width: 200px"
          size="small"
        >
          <!-- <template slot="append">月</template> -->
        </el-input>
      </p>
      <p>
        年龄：
        <el-input
          placeholder="请输入"
          v-model="info.年龄"
          style="width: 200px"
          size="small"
        >
          <template slot="append">岁</template>
        </el-input>
        接触者类型：
        <el-radio-group v-model="info.督导人员" style="display: inline-block">
          <el-radio label="家属">家属</el-radio>
          <el-radio label="非家属">非家属</el-radio>
        </el-radio-group>
      </p>
      <p>
        联系电话：
        <el-input
          placeholder="请输入"
          v-model="info.联系电话"
          style="width: 200px"
          size="small"
        >
          <!-- <template slot="append">月</template> -->
        </el-input>
      </p>
      <p>
        职业：
        <el-select
          filterable
          placeholder="请选择"
          size="small"
          style="width: 200px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </p>
      <p>
        筛查期间因症状确诊肺结核：
        <el-radio-group
          v-model="info.筛查期间因症状确诊肺结核"
          style="display: inline-block"
        >
          <el-radio label="是">是</el-radio>
          <el-radio label="否">否</el-radio>
        </el-radio-group>
      </p>
      <p v-if="info.筛查期间因症状确诊肺结核 == '是'">
        就诊时间：
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择时间"
          :picker-options="pickerOptions"
          size="small"
        >
        </el-date-picker>
      </p>
      <p v-if="info.筛查期间因症状确诊肺结核 == '是'">
        就诊原因：
        <el-checkbox-group
          v-model="info.症状及体征"
          style="display: inline-block"
        >
          <el-checkbox
            label="慢性咳嗽、咳痰≥2周"
            value="慢性咳嗽、咳痰≥2周"
          ></el-checkbox>
          <el-checkbox label="咳血或血痰" value="咳血或血痰"></el-checkbox>
          <el-checkbox label="发热、盗汗" value="发热、盗汗"></el-checkbox>
          <el-checkbox label="胸痛" value="胸痛"></el-checkbox>
          <el-checkbox label="不明原因消瘦" value="不明原因消瘦"></el-checkbox>
          <el-checkbox label="其他" value="其他"></el-checkbox>
        </el-checkbox-group>
      </p>
      <p v-if="info.筛查期间因症状确诊肺结核 == '是'">
        确诊时间：
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择时间"
          :picker-options="pickerOptions"
          size="small"
        >
        </el-date-picker>
      </p>
      <div>
        <table border="1" cellspacing="0" class="table_rd_pd">
          <tr>
            <th>筛查日期</th>
            <th>症状</th>
            <th>是否到结核病定点 医疗机构接受检查</th>
            <th>是否诊断肺结核</th>
            <th>状态（筛查备注）</th>
            <th>填写人</th>
          </tr>
          <tr v-for="item in 3" :key="item">
            <td>
              <el-date-picker
                v-model="value2"
                align="right"
                type="date"
                placeholder="选择时间"
                :picker-options="pickerOptions"
                size="small"
                style="width: 150px;"
              >
              </el-date-picker>
            </td>
            <td>
              <el-radio-group v-model="info.症状" style="display: inline-block">
                <el-radio label="有">有</el-radio>
                <el-radio label="无">无</el-radio>
              </el-radio-group>
            </td>
            <td>
              <el-radio-group
                v-model="info.是否到结核病定点医疗机构接受检查"
                style="display: inline-block"
              >
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </td>
            <td>
              <el-radio-group
                v-model="info.是否诊断肺结核"
                style="display: inline-block"
              >
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </td>
            <td>
              <el-select
                filterable
                placeholder="请选择"
                size="small"
                style="width: 150px;"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </td>
            <td>
              <el-select
                filterable
                placeholder="请选择"
                size="small"
                style="width: 150px;"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="box">
      <el-button
        type="primary"
        size="small"
        plain
        style="background-color: #fff;color: rgb(47, 160, 255);"
        @click="list.push({})"
        >添加接触者</el-button
      >
    </div>
    <div class="box">
      <div style="color: #f19332">
        温馨提示：<br />
        1、接触者应筛查日期根据肺结核患者第一次入户随访表中的随访时间决定，由于随访时间可修改，系统会根据患者最新保存的第一次入户随访表中的随访时间提示接触者的应
        筛查日期<br />
        2、每个接触者要开展3次症状筛查，分为首次（肺结核患者入户随访时做首次检查）、半年后和1年后，通过日期进行记录，并根据有无症状在相应栏内填写。症状是指咳嗽、
        咳痰≥2周或有咯血/血痰。
      </div>
    </div>
    </div>
</template>
            
            <script>
export default {
  data() {
    return {
      list: [],
      info: {
        症状及体征: [],
        药品剂型: [],
      },
      options: [
        {
          value: "测试",
          label: "测试",
        },
      ],
      pickerOptions: {
        
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
        ],
      },
      value2: "",
    };
  },
  methods: {
    btn_ok() {
      var url = this.info.id
        ? "/diabetesServiceVisit/modify"
        : "/diabetesServiceVisit/add";
      this.info.symptom = this.info.symptom.toString();
      this.info.signFootArterial = this.info.signFootArterial.toString();
      this.info.insulinCount = this.info.insulinCount.toString();
      var date = new Date();
      this.info.id
        ? (this.info.updatetime = date)
        : (this.info.createtime = date);
      this.$post(url, this.info).then((res) => {
        if (res.code == 400) {
          this.$message({
            message: res.message,
            type: "error",
          });
          return;
        }
        this.$message({
          message: "操作成功",
          type: "success",
        });
      });
    },
    getInfo(item) {
      this.isLoading = true;
      this.info = item;
      this.isLoading = false;
    },
    clear_info() {
      this.info = {
        hospitalId: "3015",
        idNo: localStorage.getItem('idCard'),
        residentName: "测试患者",
        symptom: [],
        signFootArterial: [],
        diabetesServiceChildList: [{}],
        insulinCount: [],
      };
    },
  },
};
</script>
            
            <style scoped lang="scss">
.byxyxfjhhzmqjc {
  .top {
    padding: 10px 20px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
  }
  .tab1 {
    tr {
      width: 100%;
      th {
        text-align: center;
        color: #000;
        background-color: rgb(250, 250, 250);
      }
      td {
        padding: 10px;
      }
    }
  }
  .box {
    padding: 10px 250px;
    background-color: rgb(250, 250, 250);
    margin: 10px 0;
  }
}
.table_rd_pd {
  th,
  td {
    padding: 5px 10px;
  }
}
</style>